<template>
  <div id="home">
    <div id="container">
      <!-- 菜单 -->
      <el-row type="flex" justify="center" :gutter="20">
        <el-col :span="4" class="cateList">
          <div class="cate_img" style="background: #F10215;">
            <i class="el-icon-office-building"></i>
            商品分类
          </div>
          <el-menu
            router
            default-active="2"
            class="el-menu-vertical-demo"
            v-for="item in data.slice(0, 6)"
          >
            <el-menu-item v-on:click="go(item.分类id, item.分类名称)">
              <i class="el-icon-star-on"></i>
              <span slot="title">{{ item.分类名称 }}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <!--轮播图-->
        <el-col :span="12" class="block">
          <el-carousel
            ref="carousel"
            indicator-position="outside"
            height="375px"
            @click.native="go_commodity"
          >
            <el-carousel-item v-for="(image, index) in images" :key="index">
              <img
                :src="get_image_url(image.图片)"
                style="width:100%;height:100%;object-fit:cover;"
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <!--         登录信息板块-->
        <el-col :span="4" class="con_log">
          <div>
            <img :src="image_url" v-if="image_url" />
            <img src="./img/no_login.jpg" v-else />
          </div>
          <p>Hi~ 欢迎来到胶几人商城</p>
          <p v-if="!id">
            <router-link to="/login">登录</router-link
            ><router-link to="/login">注册</router-link>
          </p>
          <p v-else class="userIn">
            <a>您好,{{ name }}</a>
            <router-link to="/me">个人中心</router-link>
          </p>
          <button class="welfare">新人福利</button>
          <button class="vip">加入会员</button>
        </el-col>
      </el-row>
    </div>

    <el-row type="flex" justify="center" style="margin:30px 0 100px;">
      <el-col :span="20">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <div class="header-sec">
              <h4 style="color:red;margin-bottom:0px">商品专区</h4>
              <el-button
                type="text"
                style="color:red"
                @click="go('6j4in3hm6swqxn4zjvyd46xweq', '分类1')"
                >查看更多&gt;</el-button
              >
            </div>
          </div>
          <el-row :gutter="10" type="flex" justify="space-between">
            <el-col
              :span="6"
              v-for="(o, index) in goods_top_4_data"
              :key="o.商品id"
              class="goods-card"
            >
              <el-card :body-style="{ padding: '0px' }" shadow="never">
                <div class="good-pic-box" @click="go_commodity_by_id(o.商品id)">
                  <img :src="get_image_url(o.商品封面)" class="card-pic" />
                </div>
                <div style="padding: 14px;">
                  <p class="goods-name">
                    {{ o.商品名称 }}
                  </p>
                  <span class="goods-price">￥{{ o.商品价格 }}</span>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div v-for="articleData in article_data" :key="articleData.id">
      <div v-if="articleData.articleList.length > 0">
        <el-row
          v-if="articleData.name === '旅游专区'"
          type="flex"
          justify="center"
          style="margin:30px 0 100px;"
        >
          <el-col :span="20">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <div class="header-sec">
                  <h4 style="color:red;margin-bottom:0px">
                    {{ articleData.name }}
                  </h4>
                  <el-button
                    type="text"
                    style="color:red"
                    @click="handleViewMore(articleData.name, articleData.id)"
                    >查看更多&gt;</el-button
                  >
                </div>
              </div>
              <el-row :gutter="10" type="flex" justify="space-between">
                <el-col
                  :span="6"
                  v-for="(o, index) in articleData.articleList"
                  :key="o.id"
                  class="goods-card"
                >
                  <el-card :body-style="{ padding: '0px' }" shadow="never">
                    <div class="good-pic-box" @click="handleReadAll(o.id)">
                      <img :src="get_image_url(o.cover)" class="card-pic" />
                    </div>
                    <div style="padding: 14px;">
                      <p class="goods-name">
                        {{ o.title }}
                      </p>
                      <p class="goods-info">{{ o.intro }}</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <el-row
          v-else
          type="flex"
          justify="center"
          style="margin:30px 0 100px;"
        >
          <el-col :span="20">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <div class="header-sec">
                  <h4 style="color:red;margin-bottom:0px">
                    {{ articleData.name }}
                  </h4>
                  <el-button
                    type="text"
                    style="color:red"
                    @click="handleViewMore(articleData.name, articleData.id)"
                    >查看更多&gt;</el-button
                  >
                </div>
              </div>
              <div
                class="l-img-r-text-box"
                v-for="(o, index) in articleData.articleList"
                :key="o.id"
              >
                <img class="left-img" :src="get_image_url(o.cover)" />
                <div class="content-box">
                  <h5 class="content-title" @click="handleReadAll(o.id)">
                    {{ o.title }}
                  </h5>
                  <div class="content-desc">
                    {{ o.remark }}
                  </div>
                  <el-link
                    type="danger"
                    class="read-all-btn"
                    @click.native="handleReadAll(o.id)"
                    >阅读全文</el-link
                  >
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 尾部 -->
    <!-- <div id="footer">
      <img src="./img/footer.png" />
      <div class="footer_text"></div>
    </div> -->
    <Footer />

    <!--左侧微型购物车区域-->
    <!--    <DrawerSection v-if="this.$route.path.indexOf('/home') != -1" @goShopCar="goShopCar"/>-->
  </div>
</template>

<script>
import { mapState } from "vuex";
import DrawerSection from "./children/DrawerSection/DrawerSection";
import ProductItem from "../../components/ProductItem/ProductItem";
import { MessageBox } from "element-ui";
import qs from "qs";
import axios from "axios";
import Utils from "./../../api/util.js";
import Footer from "../../components/Footer/Footer";

// const BASE_URL = 'http://180.76.119.45:8886';
const BASE_URL = "http://127.0.0.1:8886";
export default {
  data() {
    return {
      data: [],
      images: [],
      id: "",
      phone_number: "",
      name: "",
      image_url: "",
      goods_top_4_data: [],
      article_data: [
        {
          id: "ycqoeo0c4q7lxdcxmoixkhmvy346",
          name: "旅游专区",
          weight: 3,
          articleList: []
        },
        {
          id: "5vqydfo3h5v3mxvcvea3kx51zf7u",
          name: "文化专区",
          weight: 2,
          articleList: [
            {
              id: "dwb6mrz4y5b6ecwxyq8mm80zx6t0",
              articleTypeId: "5vqydfo3h5v3mxvcvea3kx51zf7u",
              title: "q",
              cover: "q",
              details: "q",
              createTime: 1620042607557,
              state: 1,
              weight: null
            }
          ]
        },
        {
          id: "nvohpomo2sh01dy667wmlb6cxrxq",
          name: "百家姓",
          weight: 1,
          articleList: []
        }
      ]
      // 用户的信息
    };
  },
  created() {
    this.getGoodsTop4();
    this.get_article_data();
  },

  components: {
    DrawerSection,
    ProductItem,
    Footer
  },
  methods: {
    get_user_info() {
      if (
        window.localStorage.getItem("token") &&
        window.localStorage.getItem("token").length === 64
      ) {
        axios
          .post(
            BASE_URL + "/user/get_user_info",
            qs.stringify({ token: window.localStorage.getItem("token") }),
            { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
          )
          .then(re => {
            console.log(re.data.备注);
            if (re.data.状态码 === 200) {
              // console.log(re.data.列表[0]);
              // this.list = re.data.列表[0];
              // this.list[0]

              this.id = re.data.id;
              this.phone_number = re.data.手机号;
              this.name = re.data.昵称;
              this.image_url = this.get_image_url(re.data.头像);
            } else {
              this.id = null;
              this.phone_number = null;
              this.name = null;
              this.image_url = null;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    go_commodity() {
      //获取id 打开详情页
      let activeIndex = this.$refs.carousel.activeIndex;
      this.$router.push(
        "/commodity_info?id=" + this.images[activeIndex].商品id
      );
    },

    get_article_data() {
      axios({
        method: "GET",
        url: BASE_URL + "/article/getList"
      }).then(re => {
        this.article_data = re.data.data;
      });
    },
    go_commodity_by_id(id) {
      this.$router.push("/commodity_info?id=" + id);
    },
    get_image(id) {
      return "url('" + BASE_URL + "/images/big/" + id + ".jpg')";
    },
    get_image_url(id) {
      return BASE_URL + "/images/small/" + id + ".jpg";
    },
    go(
      id,
      name //获取id 打开详情页
    ) {
      this.$router.push("/stars/?id=" + id + "&name=" + name);
      console.log(id);
    },

    getGoodsTop4() {
      axios
        .post(
          BASE_URL + "/commodity/get_commodity_list_for_sort",
          qs.stringify({
            sort_id: "6j4in3hm6swqxn4zjvyd46xweq",
            start: 0,
            coum: 4
          }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          console.log(re.data.备注);
          if (re.data.状态码 === 200) {
            console.log(re);
            this.goods_top_4_data = re.data.列表;
          } else {
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    getRList(cate_id) {
      this.$router.replace("/search/" + cate_id + "/1");
    },
    get_images() {
      //获取id 打开详情页
      axios
        .post(
          BASE_URL + "/roll_image/get_roll_image",
          qs.stringify({ token: window.localStorage.getItem("token") }),
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        )
        .then(re => {
          console.log(re.data.备注);
          if (re.data.状态码 === 200) {
            this.images = re.data.列表;
          } else {
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleReadAll(id) {
      this.$router.push({
        path: `/article-detail/${id}`
      });
    },
    handleViewMore(name, id) {
      console.log(name, id);
      this.$router.push({
        path: "/article",
        query: {
          name,
          type_id: id
        }
      });
    }
  },

  // activated(){
  //   this.get_user_info();
  //   console.log("dfsdfdsf");
  // },
  activated() {
    Utils.$emit("demo", "msg");
    this.get_user_info();
    this.get_images();
    axios
      .post(BASE_URL + "/sort/get_sort", qs.stringify({ fff: "djndjnd" }), {
        headers: { "Content-Type": "application/x-www-form-urlencoded" }
      })
      .then(re => {
        console.log(re.data.备注);
        if (re.data.状态码 === 200) {
          this.data = re.data.列表;
        } else {
        }
      })
      .catch(error => {
        console.log(error);
      });

    // 请求商品数据
    // if(this.userInfo && this.userInfo.id){
    //   let user_id = this.userInfo.id;
    //   this.$store.dispatch('reqCartsGoods',{user_id});
    // }
  },
  watch: {
    categoryList() {
      this.$nextTick(() => {
        // 请求首页商品数据
        this.$store.dispatch("reqHomeShopList");
      });
    }
  }
};
</script>

<style scoped>
#home {
  font-family: "Microsoft YaHei";
  margin-top: 20px;
  background: rgba(245, 245, 245, 0.5);
  overflow: hidden;
  /* margin-bottom: 800px; */
}

/*产品展示、购买、分类简介区*/
#container {
  width: 100%;
  padding-top: 20px;
}
#container .el-row .el-col {
  height: 100%;
}
.cateList {
}
.cateList >>> .el-menu {
  border-right: none;
}
.cate_img {
  width: 100%;
  text-indent: 14px;
  height: 40px;
  color: white;
  line-height: 40px;
  font-size: 16px;
  background: #f10215;
}
/*自动播放图片区域*/
.el-col .el-carousel {
  /*height: 100%;*/
  border-top: 2px solid #ff0036;
}
.el-carousel__container.el-carousel__item img {
  width: 900px;
  height: 375px;
}
/*一级菜单*/

/*展示登录信息区域*/
#container .el-row .con_log.el-col {
  background: white;
  font-size: 15px;
  color: #989898;
  /* border: 1px solid #ccc; */
  position: relative;
  height: 375px;
  text-align: center;
}
.con_log > div {
  width: 70px;
  height: 70px;
  margin: 50px auto;
}
.con_log > div > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 3px 3px 5px 5px #e3e3e3;
}
.con_log > p {
  margin-bottom: 20px;
  /* padding-left: 50px; */
}
.con_log > p > a {
  font-size: 13px;
  margin-right: 10px;
  margin-bottom: 5px;
  color: #666;
  cursor: pointer;
  text-decoration: none;
}
.con_log > .userIn > a {
  display: block;
}
.con_log > p > a:hover {
  color: red;
  font-weight: 700;
}
.con_log > button {
  margin-right: 5px;
  width: 70px;
  height: 25px;
  line-height: 25px;
  font-size: 12px;
  text-align: center;
  border-radius: 13px;
  box-shadow: 6px 8px 20px rgba(45, 45, 45, 0.15);
  transition: background 0.3s ease, color 0.3s ease;
  outline: none;
  border: none;
}
.con_log > button.welfare {
  color: #e43f3b;
  background: white;
}
.con_log > button.vip {
  color: #e5d790;
  background: #2d2d2a;
}
.con_log > button:hover {
  color: white;
  background: #e43f3b;
}
/*每类产品的简单展示*/
#container > .product {
  margin-top: 50px;
  width: 100%;
  height: 300px;
}
.product > .pro_line {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 26px;
  font-family: sans-serif;
  font-weight: normal;
  color: #222;
  margin-bottom: 20px;
}
.pro_line > h3 {
  display: inline-block;
}
.pro_line > div {
  display: inline-block;
  margin-left: 15px;
  cursor: pointer;
}
.pro_line > div > a {
  color: red;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  transition: 0.5s;
}
.pro_line > div > a:after {
  content: "»";
  opacity: 0; /*opacity属性不占用文档流的空间*/
  transition: 0.5s;
}
.pro_line > div:hover a:after {
  opacity: 1;
}
.product > .pro_show {
  margin: 0 auto;
  padding-left: 20px;
  width: 980px;
  height: 200px;
}
.pro_1 {
  width: 100%;
  text-align: center;
  margin-top: 300px;
}
.pro_1 > .item_content {
  width: 100%;
  text-align: center;
}
/*商品图片展示*/

.end_show {
  /*margin-top: -59px;*/
  width: 100%;
  height: 200px;
  border: #f22d00 solid 3px;
  margin-top: 521px;
  position: absolute;
  z-index: 0;
}
.header-sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/*底部对商城的补充说明*/
/* #footer {
  width: 100%;
  height: 200px;
  background: #f0f3ef;
  position: absolute;
  z-index: 0;
  border-top: 4px solid red;
}
#footer > img {
  display: block;
  margin: 0 auto;
}
#footer > .footer_text {
  width: 100%;
  border-top: 1px solid #dedede;
} */

/* 卡片 */

.box-card {
  border: none;
  border-top: 2px solid red;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.goods-card {
  overflow: hidden;
}
.goods-card:not(:nth-last-of-type(-n + 2)) {
  margin-bottom: 10px;
}

/* .goods-card:nth-last-child(-n + 4) {
  margin-bottom: 0;
} */

.goods-name {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgb(36, 36, 36);
  font-size: 14px;
}
.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button {
  padding: 0;
  float: right;
}
.good-pic-box {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.goods-price {
  color: red;
  font-weight: bold;
}

.card-pic {
  width: 100%;
  display: block;
  transition: transform 0.3s;
  cursor: pointer;
  height: 100%;
  object-fit: cover;
}

.card-pic:hover {
  transform: scale(1.2);
  transform-origin: center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.l-img-r-text-box {
  display: flex;
}
.l-img-r-text-box:not(:last-child) {
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgb(241, 241, 241);
}

.left-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 2px;
}
.content-box {
  margin-left: 20px;
  flex: 1;
}
.content-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  position: relative;
  margin-right: 30px;
  font-size: 14px;
  color: rgb(153, 153, 153);
}
.read-all-btn {
  color: red !important;
  float: right;
  margin-top: 20px;
  display: block;
}
.content-title {
  cursor: pointer;
}
.content-title:hover {
  color: red;
  text-decoration: underline;
}
</style>
